<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.2/themes/base/jquery-ui.css"/>
		<script src="jquery-ui-1.10.2/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery-ui-1.10.2/ui/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
		 <style>
		  .ui-menu { width: 150px; }
		 </style>
	</head>
	<body id="bd">
			
			<script type="text/javascript">
				var categories=[
					{"id":10,"name":'男装',"children":[
						{"id":101,"name":'正装'},
						{"id":102,"name":'T恤'},
						{"id":103,"name":'裤衩'}
					]},
					{"id":20,"name":'女装',"children":[
						{"id":201,"name":'短裙'},
						{"id":202,"name":'连衣裙'},
						{"id":203,"name":'裤子',"children":[
							{"id":2031,"name":'长裤'},
							{"id":2031,"name":'九分裤'},
							{"id":2031,"name":'七分裤'}
						]},
					]},
					{"id":30,"name":'童装',"children":[
						{"id":301,"name":'帽子'},
						{"id":302,"name":'套装',"children":[
							{"id":3021,"name":"0-3岁"},
							{"id":3021,"name":"3-6岁","children":[
								{"id":2031,"name":'长裤'},
								{"id":2031,"name":'九分裤'},
								{"id":2031,"name":'七分裤',"children":[
									{"id":101,"name":'正装'},
									{"id":102,"name":'T恤'},
									{"id":103,"name":'裤衩'}
								]}
							]},
							{"id":3021,"name":"6-9岁"},
							{"id":3021,"name":"9-12岁"}
						]},
						{"id":303,"name":'手套'}
					]}
				];
				
				function selecteChildren(arr,root){
					var ul=$(`<ul id='menu'></ul>`);
					arr.forEach(val=>{
						var li=$(`<li><a href="#">${val.name}</a></li>`);
						ul.append(li);
						
						if(val.children){
							selecteChildren(val.children,li)
						}
					})
					root.append(ul);
				}
				
				selecteChildren(categories,$("body"));
				$( "#menu" ).menu();
			</script>
	</body>
</html>
